<template>
  <div class="app-container">
    <div class="calender-wraper">
      <lunar-full-calendar
        ref="calendar"
        :events="events"
        :config="config"
      />
      <el-dialog title="筛选" :visible.sync="dialogFormVisible" width="20%" top="92px" custom-class="filterDialog" :modal="false" :show-close="true">
        <el-form label-width="60px" size="mini">
          <el-form-item label="值班小组">
            <el-select v-model="searchObj.s_teamGroupId" clearable filterable remote placeholder="请选择值班组">
              <el-option v-for="(item) in groupList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="班次">
            <TreeSelect
              v-model="searchObj.s_classesCode"
              :multiple="false"
              :options="availableClasses"
              :disable-branch-nodes="true"
              placeholder="请选择班次"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="reset">重 置</el-button>
          <el-button size="mini" @click="fetch">检 索</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getStartMonth, getEndMonth, addMonths } from '@neu/biz-core/utils/utils'
import { myCalendar } from '@neu/dcom-ui/api/calendar'
import { LunarFullCalendar } from 'vue-lunar-full-calendar'
import TreeSelect from '@neu/biz-core/components/TreeSelect'
import { list as getTeamGroupList } from '@neu/dcom-ui/api/teamgroup'
import { isEmpty } from '@neu/biz-core/utils'
import { list as classesList } from '@neu/dcom-ui/api/classes'

export default {
  name: 'DutyCalender',
  components: {
    LunarFullCalendar,
    TreeSelect
  },
  data() {
    return {
      dialogFormVisible: false,
      groupList: [],
      availableClasses: [],
      events: [],
      config: {
        selectable: true,
        locale: 'zh-cn',
        buttonText: {
          today: '今天',
          month: '月',
          week: '周',
          day: '日'
          // prev: '上一月',
          // next:'下一月',
          // prevYear:'上一年',
          // nextYear:'下一年'
        },
        customButtons: {
          myFilter: {
            text: '筛选'
          }
        },
        header: {
          left: 'today',
          center: 'prevYear prev title next nextYear',
          right: 'myFilter'
        },
        // 禁止拖住
        eventStartEditable: false,
        // 每格子限制多少条
        eventLimit: 3,
        noEventsMessage: '暂无数据',
        eventLimitText: '更多...',
        firstDay: 0,
        // 默认展示
        defaultView: 'month',
        allDaySlot: true,
        allDayText: '',
        // 时区
        timezone: 'local',
        // slotLableFormat: 'HH:mm',
        // titleFormat: 'MMMM YYYY',
        chooseStartDay: '',
        chooseEndDay: '',
        eventOrder: 'orderid'
      },
      searchObj: {
        s_startTime: getStartMonth().getTime(),
        s_endTime: getEndMonth().getTime(),
        s_teamGroupId: null,
        s_classesCode: null,
        s_isUser: true
      }

    }
  },
  created() {
    this.fetch()
    getTeamGroupList({}).then(res => { this.groupList = res.data })
    classesList({}).then(res => {
      const data = res.data
      data.forEach(k => {
        const item = {
          title: k.name,
          code: k.id,
          children: []
        }
        k.items.forEach(m => {
          item.children.push({
            title: m.name,
            code: m.code,
            children: []
          })
        })
        this.availableClasses.push(item)
      })
    })
  },
  mounted() {
    const self = this
    // 今天
    const nowBtn = self.$refs.calendar.$refs.calendar.children[0].children[0].children[0]
    nowBtn.addEventListener('click', function() {
      self.searchObj.s_startTime = getStartMonth().getTime()
      self.searchObj.s_endTime = getEndMonth().getTime()
      self.fetch()
    })

    // 当前日期的前一年
    const beforeYearBtn = self.$refs.calendar.$refs.calendar.children[0].children[2].children[0]
    beforeYearBtn.addEventListener('click', function() {
      var currentStartDate = new Date(self.searchObj.s_startTime)
      self.searchObj.s_startTime = addMonths(currentStartDate, -12).getTime()
      self.searchObj.s_endTime = getEndMonth(new Date(self.searchObj.s_startTime).getFullYear(), new Date(self.searchObj.s_startTime).getMonth() + 1).getTime()
      self.fetch()
    })

    // 当前日期的前一年
    const leftBtn = self.$refs.calendar.$refs.calendar.children[0].children[2].children[1]
    leftBtn.addEventListener('click', function() {
      var currentStartDate = new Date(self.searchObj.s_startTime)
      self.searchObj.s_startTime = addMonths(currentStartDate, -1).getTime()
      self.searchObj.s_endTime = getEndMonth(new Date(self.searchObj.s_startTime).getFullYear(), new Date(self.searchObj.s_startTime).getMonth() + 1).getTime()
      self.fetch()
    })

    // 当前日期的后一个月
    const rightBtn = self.$refs.calendar.$refs.calendar.children[0].children[2].children[3]
    rightBtn.addEventListener('click', function() {
      var currentStartDate = new Date(self.searchObj.s_startTime)
      self.searchObj.s_startTime = addMonths(currentStartDate, 1).getTime()
      self.searchObj.s_endTime = getEndMonth(new Date(self.searchObj.s_startTime).getFullYear(), new Date(self.searchObj.s_startTime).getMonth() + 1).getTime()
      self.fetch()
    })

    // 当前日期的后一年
    const afterYearBtn = self.$refs.calendar.$refs.calendar.children[0].children[2].children[4]
    afterYearBtn.addEventListener('click', function() {
      var currentStartDate = new Date(self.searchObj.s_startTime)
      self.searchObj.s_startTime = addMonths(currentStartDate, 12).getTime()
      self.searchObj.s_endTime = getEndMonth(new Date(self.searchObj.s_startTime).getFullYear(), new Date(self.searchObj.s_startTime).getMonth() + 1).getTime()
      self.fetch()
    })

    // 刷选按钮添加事件
    const filterBtn = self.$refs.calendar.$refs.calendar.children[0].children[1].children[0]
    filterBtn.addEventListener('click', function() {
      self.myFilterClick()
    })
  },
  methods: {
    // 查询初始化排班数据
    fetch() {
      if (isEmpty(this.searchObj.s_teamGroupId)) this.searchObj.s_teamGroupId = null
      this.dialogFormVisible = false
      myCalendar(this.searchObj).then(res => {
        this.events = []
        res.data.forEach(element => {
          const obj = {
            id: element.id,
            title: '[' + element.classesName + ']' + element.teamGroupName,
            start: element.startTime,
            end: element.endTime,
            color: element.color
          }
          this.events.push(obj)
        })
      })
    },
    myFilterClick() {
      this.dialogFormVisible = true
    },
    reset() {
      this.searchObj.s_teamGroupId = null
      this.searchObj.s_classesCode = null
      this.fetch()
      this.dialogFormVisible = true
    }
  }
}
</script>
